<template>
    <div class='modal'>
        <div class='header'>
            <div class='f-18' style='flex:1'>{{data.alarmStr}}</div>
            <div style='display: flex;align-items: center;'>警铃<a-switch class='ling m-l-5' checked-children="开" un-checked-children="关" v-model:checked="checked" :loading='loading' /></div>
        </div>
        <div class='m-t-15'>
            <div>详细地址：{{data.city}}{{data.address}}</div>
            <div class='m-t-5'>联系方式：{{data.warnContactName1}}/{{data.warnContactTel1}}</div>
        </div>
        <div style='text-align:right;'>
            <a style='cursor: pointer;color:#d7621c' target="_blank" :href='data.monitorUrl'>查看监控</a>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, ref } from "vue"

interface Props {
    data : {[key:string]:any}
}

export default defineComponent({
    props : {
        data : {
            type : Object,
            default() {
                return {

                }
            }
        }
    },

    setup (props:Props) {
        let loading = ref(false)
        let checked = ref(false)
        return {
            loading,
            checked
        }
    }
})
</script>

<style scoped lang='scss'>
    .modal{
        width: 355px;
        background: rgba(63, 79, 112, 0.6);
        border: 3px solid rgba(168, 196, 225, 0.6);
        padding:15px 15px 5px 15px;
        color: #fff;

        .header{
            display: flex;
            align-items: center;

        }
    }

    .ling{
        background: none !important;
        border: 1px solid #6e9cfd;
        width: 55px;
        height: 30px;
        border-radius: 15px;
        &::after{
            width: 26px;
            height: 26px;
            background: #6e9cfd !important;
        }
    }
    
</style>